<template>
  <div class="con">
    <!-- 放置内容区 -->
    <div class="contbox6_10" v-if="true">
      <p class="titlelist6_10">
        商户管理
        <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>商户流水
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="listQuery" :model="listQuery" label-width="100px">
            <el-form-item label="归属机构">
              <el-input @focus="selectInstitution" readonly placeholder="请选择归属机构" v-model="officeName"></el-input>
            </el-form-item>
            <el-form-item label="归属OEM">
              <el-input placeholder="请输入归属OEM" v-model="listQuery.oemName"></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input placeholder="请输入机构名称" v-model="listQuery.officeName"></el-input>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input placeholder="请输入订单号" v-model="listQuery.orderCode"></el-input>
            </el-form-item>
            <el-form-item label="通道订单号">
              <el-input placeholder="请输入通道订单号" v-model="listQuery.channelOrderCode"></el-input>
            </el-form-item>
            <el-form-item label="商户姓名">
              <el-input placeholder="请输入商户姓名" v-model="listQuery.merName"></el-input>
            </el-form-item>
            <el-form-item label="商户手机号">
              <el-input placeholder="请输入商户手机号" v-model="listQuery.mobile"></el-input>
            </el-form-item>
            <el-form-item label="交易方式">
              <el-select v-model="listQuery.txnType" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="刷卡" value="1"></el-option>
              <el-option label="微信" value="2"></el-option>
              <el-option label="支付宝" value="3"></el-option>
              <el-option label="银联二维码" value="4"></el-option>
              <el-option label="qq钱包" value="5"></el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="交易类型">
              <el-select v-model="listQuery.transType" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="消费" value="1"></el-option>
              <el-option label="消费撤销" value="2"></el-option>
              <el-option label="冲正" value="3"></el-option>
              <el-option label="退货 " value="4"></el-option>
              <el-option label="预授权" value="5"></el-option>
              <el-option label="预授权完成撤销" value="6"></el-option>
              <el-option label="预授权完成冲正" value="7"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="商品序列号">
              <el-input placeholder="请输入商品序列号" v-model="listQuery.productCode"></el-input>
            </el-form-item>
            <el-form-item label="交易时间">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                v-model="listQuery.startDate"
              ></el-date-picker>
              <div class="times">-</div>
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                v-model="listQuery.endDate"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            v-if="isAuth('merchantsWaterSearch')"
            type="primary"
            @click="handleSelectLists"
          >搜索</el-button>
          <el-button v-if="isAuth('merchantsWaterReset')" @click="resetTheSearch">重置</el-button>
          <div style="margin-left:40px;float:left">
          <!-- <el-button
            type="primary"
            icon="search"
            v-if="isAuth('merchantDownload')"
            @click="downloadTemplate"
            class="butt"
          >下载模板</el-button>
          <el-upload
            v-if="isAuth('merchantImportData')"
            class="upload-demo"
            action
            ref="upload"
            style="height:32px;display: inline-block;float:left"
            :http-request="submitFileSave"
            :before-upload="beforeAvatarUpload"
            :show-file-list="false"
          >
            <el-button
              class="butt"
              style="height:32px;margin-left:10px;width:100px"
              type="primary"
              icon="edit"
            >导入数据</el-button>
          </el-upload> -->
          <el-button
            @click="exportFiles"
            v-if="total>0"
            class="butt"
            type="primary"
            style="margin-left:10px;height:32px"
          >批量导出</el-button></div>
        </div>
        <el-table
          :data="list"
          border
          ref="multipleTable"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          style="margin-top: 24px !important;"
        >
          <el-table-column type="selection" min-width="55"></el-table-column>
         
          <el-table-column show-overflow-tooltip min-width="120" label="归属机构">
            <template slot-scope="scope">
              <span>{{ scope.row.toOfficeName }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="120" label="归属OEM">
            <template slot-scope="scope">
              <span>{{ scope.row.oemName }}</span>
            </template>
          </el-table-column>
           <el-table-column show-overflow-tooltip min-width="120" label="机构ID">
            <template slot-scope="scope">
              <span>{{ scope.row.officeUid }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="150" label="机构名称">
            <template slot-scope="scope">
              <span>{{ scope.row.officeName }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="180" label="订单号">
            <template slot-scope="scope">
              <span>{{ scope.row.orderCode }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="175" label="通道订单号">
            <template slot-scope="scope">
              <span>{{ scope.row.channelOrderCode }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="155" label="交易日期">
            <template slot-scope="scope">
              <span>{{ scope.row.dealDate }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="80" label="数据来源">
            <template slot-scope="scope">
              <span>
                {{scope.row.dataSources == "1" ? "数据导入" : "系统推送" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column min-width="155" show-overflow-tooltip label="数据来源时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="100" label="品牌名称">
            <template slot-scope="scope">
              <span>{{ scope.row.channelName }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="100" label="商品名称">
            <template slot-scope="scope">
              <span>{{ scope.row.productName }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="100" label="商品序列号">
            <template slot-scope="scope">
              <span>{{ scope.row.productCode }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="80" label="商户姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.merName }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="110" show-overflow-tooltip label="商户手机号">
            <template slot-scope="scope">
              <span>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" label="交易方式">
            <template slot-scope="scope">
              <span v-if="scope.row.txnType == 1">刷卡</span>
              <span v-if="scope.row.txnType == 2">微信</span>
              <span v-if="scope.row.txnType == 3">支付宝</span>
              <span v-if="scope.row.txnType == 4">银联二维码</span>
              <span v-if="scope.row.txnType == 5">qq钱包</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" label="交易卡类型">
            <template slot-scope="scope">
              <span v-if="scope.row.cardType == 0">未知卡</span>
              <span v-if="scope.row.cardType == 1">借记卡</span>
              <span v-if="scope.row.cardType == 2">贷记卡</span>
              <span v-if="scope.row.cardType == 3">准贷记卡</span>
            </template>
          </el-table-column>
          <el-table-column min-width="120" label="交易类型">
            <template slot-scope="scope">
              <span v-if="scope.row.transType == 1">消费</span>
              <span v-if="scope.row.transType == 2">消费撤销</span>
              <span v-if="scope.row.transType == 3">冲正</span>
              <span v-if="scope.row.transType == 4">退货 </span>
              <span v-if="scope.row.transType == 5">预授权</span>
              <span v-if="scope.row.transType == 6">预授权完成撤销</span>
              <span v-if="scope.row.transType == 7">预授权完成冲正 </span>
            </template>
          </el-table-column>
          <el-table-column min-width="140" label="是否押金交易">
            <template slot-scope="scope">
              <span v-if="scope.row.isAmt == 1">押金</span>
              <span v-if="scope.row.isAmt == 0">非押金</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="80" label="交易金额">
            <template slot-scope="scope">
              <span>{{ scope.row.txnAmt }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="80" label="分润状态">
            <template slot-scope="scope">
              <span v-if="scope.row.settleStatus == 0">未分润</span>
              <span v-if="scope.row.settleStatus == 1">不分润</span>
              <span v-if="scope.row.settleStatus == 2">已分润</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="80" label="交易状态">
            <template slot-scope="scope">
              <span>{{ scope.row.status == 1 ? "失败" : "成功" }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="font-size: 16px;margin-top: 30px">
          <div  v-if="!listLoading" class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="listQuery.page"
              :page-sizes="[20, 50, 100]"
              :page-size="listQuery.number"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
import Tree from "../tree/index";
import https from '../../plugins/https.js';
// 批量导出
import { exportFile } from "../../plugins/expord"
export default {
  name: "shareTheTemplate",
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      checkedAll: false,
      showType: false,
      officeName: "",
      listQuery: {
        productCode:"",
        showType: false,
        oemUid:
          localStorage.getItem("jurisdiction") != 2 ? localStorage.getItem("uid") : undefined, //OEMid
        oemName: undefined, //OEM名称
        txnType:"",//交易类型
        transType:"",//终端交易类型
        officeUid: undefined, //机构ID
        officeName: undefined, //机构名称
        merName: undefined, //商户名称
        mobile: undefined, //手机号
        orderCode: undefined, //订单号
        channelOrderCode: undefined, //	通道订单号
        status: undefined, //状态
        startDate: undefined, //开始时间
        endDate: undefined, //结束时间
        page: 1, //第几页
        number: 20 //每页几条
      },
      fileData: new FormData(), //文件上传对象
      // urltype: this.GLOBAL.httpurl, //请求地址
      multipleSelection: [], //选中的数组
      selectTime: [],
      sign: localStorage.getItem("jurisdiction") == 2 //最高权限看到的true
    };
  },
  components: {
    Tree
  },
  created() {
    let that = this;
    that.handleSelectList();
  },

  methods: {
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.listQuery.officeUid = data.uid;
      this.officeName = data.name;
      // console.log(this.form.officeUid)
      //归属机构名字
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束

    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.list.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation： 界面集合获取数据
     **/
    handleSelectList() {
      let that = this;
      that.listLoading = true;
        https.teamMerDeal(that.listQuery).then(res => {
          if (res.data.code == "0000") {
            that.list = res.data.data;
            that.total = res.data.total;
            that.listLoading = false;
          } else {
            that.listLoading = false;
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2 //1秒后自动关闭
            });
          }
        });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      let that = this;
      that.listQuery.number = val;
      that.listQuery.page = 1;
      that.handleSelectList();
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      let that = this;
      that.listQuery.page = val;
      that.handleSelectList();
    },
    // 搜索
    handleSelectLists() {
      let that = this;
      that.listQuery.page = 1;
      that.handleSelectList();
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 导出模板
     * @date:2020/6/11   20:44
     */
    exportFiles() {
      let that = this;
      exportFile("/api/merchant/merDeal/excel/export",that.listQuery,"商户流水")
    },
    /**
     * @author: Zhu Liangfu
     * @Description:下载模板
     * @date:2020/7/14   16:09
     */
    downloadTemplate() {
      let that = this;
      exportFile("/api/downMerchanBusiness",{},"商户流水模板")
    },
    /**
     * @author: Zhu Liangfu
     * @Description:导入数据
     * @date:2020/7/14   16:09
     */
    submitFileSave(file) {
      let that = this;
      that.fileData.append("file", file.file);
      that
        .axios({
          method: "POST",
          url: "api/uploadMerchanBusiness",
          headers: { "Content-Type": "multipart/form-data" },
          data: that.fileData
        })
        .then(res => {
          this.fileData.delete("file");
          if (res.data.code == "0000") {
            this.listQuery.page = 1;
            this.handleSelectList();
          } else {
            this.fileData.delete("file");
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2 //2秒后自动关闭
            });
          }
        });
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 文件校验
     * @date:2020/7/13   15:08
     */
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG = file.type === "application/vnd.ms-excel";
      const isLt2M = file.size / 1024 / 1024 < 1000;
      if (!isJPG) {
        this.$message.error("导入数据文件格式有误");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("导入数据文件大小不能超过 1Mb!");
        return false;
      }
      return isJPG && isLt2M;
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件
     **/
    resetTheSearch() {
      let that = this;
      this.officeName = "";
      that.listQuery = {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        oemName: undefined, //OEM名称
        officeUid: undefined, //机构ID
        officeName: undefined, //机构名称
        merName: undefined, //商户名称
        mobile: undefined, //手机号
        orderCode: undefined, //订单号
        productCode:"",
        channelOrderCode: undefined, //	通道订单号
        status: undefined, //状态
        startDate: undefined, //开始时间
        endDate: undefined, //结束时间
        txnType:"",//交易类型
        transType:"",//终端交易类型

        page: 1, //第几页
        number: 20 //每页几条
      };
      that.selectTime = [];
      that.handleSelectList();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.fileList {
  display: inline-block;
  border-style: solid dotted dashed double;
  padding: 8px 8px 8px 8px;
  text-align: center;
}
.times {
  width: 20px;
  display: inline-block;
  text-align: center;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
.buttons > div > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
